<template>
  <div class="div_flex">
    <Nav />
    <img style="width: 100%" src="../../assets/images/公司概况.png" alt="" />
    <div class="container">
      <div
        style="
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
        "
      >
        <div style="padding-bottom: 10px">
          <div class="container_n">
            <img
              style="width: 18px; margin-right: 5px"
              src=""
              alt=""
            />
            <div>您的位置：</div>
            <el-breadcrumb separator="/" class="top">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>公司概况</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
        </div>
        <div class="logo">
          <div class="nav-items">
            <div
              v-for="(item, i) in navList"
              :key="i"
              @click="toDetail(i)"
              :class="['nav-item', { active: tabIndex === i }]"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
      <el-card v-if="tabIndex == 0" class="top">
        <div class="content">
          <div class="qqqqqqqqqq">
            <div class="left_list">
              <div style="color: #9a9fa5; margin-bottom: 5px">成立于2015年</div>
              <div style="color: #000">北京融信川科技有限公司</div>
            </div>
          </div>
          <div class="tent">
            <div class="tnet_title">北京融信川科技有限公司</div>
            <div class="tent_tent">
              <p>
                北京融信川科技有限公司是中国电力企业联合会科技服务中心信息化建设合作研发单位，公司主要从事能源项目咨询、科技成果推广，更立足于发展能源行业信息化建设的高新技术企业。
              </p>
              <p>
                融信川公司是一个以咨询、研发、集成与服务为导向的高科技企业，其主导业务是企业信息化建设。公司拥有企业安全管理咨询、信息化建设咨询、软件开发和项目实施方面的资深行业专家和技术研发团队，以软件工程为指导思想建立了软件研发和销售服务体系。公司采用先进的基于Java的快速开发平台，专注于解决软件开发中效率低下、技术复杂、需求多变、维护困难等现状，几乎不需编码，以可插拔组件为核心实现软件自动化，在可视化环境中创建可观察、可管理的企业级应用。公司基于长期研发投入和丰富的行业经验，为广大能源行业用户提供优质的产品和服务。
              </p>
              <p>
                2008年至今，在神华集团本质安全管理体系的思想指引下，参照集团本质安全管理体系模型，公司与神华集团共同合作研发了安全监察管理信息平台，我们把安全基础管理的内容及流程步步为营的固化在此平台中，首先我们将风险预控管理、承包商管理、事件管理、本安评价管理、应急管理、隐患管理、安全培训管理、职业健康管理等内容以信息系统的方式进行了不断地探索与实践。该平台已在神华国华公司、神晥公司、神福公司所属发电单位安装使用，真正实现了安全管理的“专业化、信息化、可视化、数字化、精细化”。
              </p>
              <p>
                2013年至2016年，我们与神华集团合作共同研发神华科技创新项目-火电厂安全生产评价管理系统。系统主要实现企业生产、管理各方面工作的专业化、集约化、扁平化、信息化，降低人为因素对评价结果造成的影响，能够全面客观评价企业安全管理水平，注重PDCA过程，找出企业安全管理薄弱环节，从而为制定防范措施和整改计划，为管理决策层提供科学依据。目前系统已在神华国华电力公司应用，用户反映较好，效果显著。
              </p>
              <p>
                2015年至2017年，我们还与神华集团安监局煤矿处合作研发神华科技创新项目-煤矿安全生产事故隐患管理体系，主要是建立神华集团公司、煤炭子（分）公司、煤矿三级的安全生产事故隐患管理体系，努力实现由“事后、事中排查治理隐患”向“事先预控、消除隐患产生”根本转变，做到安全生产事故隐患管理的常态化、规范化、标准化、科学化，推进煤矿风险预控管理体系的全面“落地”。对于其他煤炭集团在安全生产事故隐患管理体系方面的建设能够有很好的借鉴并具有市场推广价值。该体系具有较强的适应性，主要面向煤矿，但其原理、思路、要求、标准等可在神华铁路、港口、煤制油化工、电力等其他板块借鉴推广。
              </p>
              <p>
                2017年至今，开发了国华电力公司安全生产监督管理信息系统平台，通过信息化管理手段，实时有效监控人的不安全行为、物的不安全状态、环境的不安全因素。进一步提升安全生产可视化、数字化及智能化水平，完善视频监控系统建设，实现对重点岗位、重要部位和高风险作业区域可视化、可追溯监控。充分利用“大数据、数字化”技术，共享承包商信息，实现对承包商的全过程管控；提升压力容器及承压部件安全监管、重大危险源监控、重大隐患排查治理、应急响应与处置等综合能力。实现安全管理全时段、安全记录可追溯、发电单位间横向对比学习交流、提升日常安全管理工作效率的目的，以满足电力公司对于安全生产监督体系的管理需要。
              </p>
              <p>
                随着国家两化深度融合方针的贯彻，在能源互联网、智能制造等工业技术创新政策引导下，在节能减排政策的要求和发电集团集约化、高效管理的需求驱动下，发电企业对新型数字化电厂、智能化电厂、智慧型电厂的建设探索已经在摸索中开始进行。公司正在与国家能源集团、中国电力企业联合会、华北电力大学等单位积极开展合作，结合我们自身优势，联合大家之力量，探索实现电力企业机组运行控制的高度智能化与信息化，实现“减人增效”的目的，建设国际一流的智慧型电站。
              </p>
              <p>
                本公司愿与社会各界相互合作、共同努力，为我国能源行业信息化建设做出贡献。
              </p>

              <img src="../../assets/images/Snipaste.png" alt="" />
            </div>
          </div>
        </div>
      </el-card>
      <div v-if="tabIndex == 1" class="top tongsi">
        <div class="content">
          <div class="content_guanjia">
            <div style="margin-bottom: 5px; margin-bottom: 20px;">组织架构</div>
            <div style="color: #aaa; font-size: 38px; font-weight: 400;">Organizational Structure</div>
          </div>
          <div class="tent">
            <div class="tnet_title">北京融信川科技有限公司</div>
            <div>
              <img src="../../assets/images/gungsiimage.png" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer class="top" />
  </div>
</template>

<script>
import Banner from "./components/Banner";
import Nav from "./components/Nav.vue";
import Footer from "./components/Footer.vue";
import { getAboutById } from "@/api/index.js";

export default {
  name: "About",
  components: { Nav, Footer, Banner },

  data() {
    return {
      tabIndex: 0,
      imageUrl: "",
      navList: [
        {
          name: "集团简介",
        },
        {
          name: "组织架构",
        },
      ],
    };
  },

  mounted() {
    console.log(11);
    
    setTimeout(() => {
        window.scrollTo({
        top: 0,
        behavior: 'smooth' // 平滑滚动
      });
    }, 0)
  },

  methods: {
    toDetail(i) {
      this.tabIndex = i;
    },
    fetchAboutImage() {
      getAboutById(1)
        .then((response) => {
          this.imageUrl = response.data.imageUrl; // 假设返回的数据中包含 imageUrl 字段
        })
        .catch((error) => {
          console.error("API request failed:", error);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.div_flex {
    background: url(../../assets/images/底部纹理.png) no-repeat;
    background-position: 0 500px;
}
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh; // Ensure the page takes at least the full height of the viewport
  padding: 20px;

  @media (max-width: 768px) {
    padding: 10px;
  }

  @media (max-width: 480px) {
    padding: 5px;
  }
}

.container {
  flex: 1; // Allow the container to grow and fill available space
  margin-bottom: 100px; // Add space between container and footer
  .container_n {
    font-size: 14px;
    display: flex;
    align-items: flex-end;
  }
}

.about-us {
  margin: 40px 0;
  text-align: center;

  h2 {
    font-size: 24px;
    margin-bottom: 20px;
    position: relative;
  }

  h2::after {
    content: "";
    display: block;
    width: 50px;
    height: 2px;
    background: red;
    margin: 10px auto 0;
  }

  p {
    font-size: 16px;
    color: #666;
    margin-bottom: 40px;
  }
}

/* 新增样式 */
.about-image {
  width: 100%;
  height: auto;
  border: 1px solid #e1e1e1;
}
.content {
  font-size: 24px;
  display: flex;
  .content_guanjia {
    flex: 0 0 330px;
    margin-right: 20px;
    border-right: 1px solid #000;
    font-weight: 700;
  }
  .qqqqqqqqqq {
    flex: 0 0 350px;
  }
  .left_list {
    margin-right: 20px;
    padding: 15px;
    background-color: #f3f5f7;
  }
  .tent {
    width: 100%;
    .tnet_title {
      color: #151f2f;
      font-weight: 700;
      font-size: 24px;
      padding-bottom: 20px;
      margin-bottom: 20px;
      border-bottom: 1px solid #e5e5e5;
    }
    .tent_tent {
      p {
        font-size: 16px !important;
        color: #454a5b;
        text-indent: 2em;
        margin: 2em 0 2em 0;
        line-height: 30px;
      }
    }
  }
}

.logo {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1; // 让 logo 部分占据剩余空间

  .nav-items {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */

    &::-webkit-scrollbar {
      display: none; /* WebKit */
    }
  }
}

.nav-item {
  flex: 0 0 auto;
  padding: 0 15px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.3s;

  &:hover,
  &.active {
    color: #4c88ff;
  }
}
.active {
  color: #0b2183;
  border-bottom: 3px solid #0b2183;
}
</style>